import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import {Separator as VanillaSeparator} from 'vanilla-starter/Separator';
import {Separator as TailwindSeparator} from 'tailwind-starter/Separator';
import tailwindDocs from 'docs:tailwind-starter/Separator';
import vanillaDocs from 'docs:vanilla-starter/Separator';
import '../../tailwind/tailwind.css';

export const relatedPages = [{'title': 'useSeparator', 'url': 'Separator/useSeparator.html'}];
export const description = 'A separator is a visual divider between two groups of content.';

# Separator

<PageDescription>{docs.exports.Separator.description}</PageDescription>

<ExampleSwitcher examples={['Vanilla', 'Tailwind']}>
  <VisualExample
    component={VanillaSeparator}
    docs={vanillaDocs.exports.Separator}
    links={vanillaDocs.links}
    props={['orientation']}
    type="vanilla"
    files={["starters/docs/src/Separator.tsx", "starters/docs/src/Separator.css"]} />
  <VisualExample
    component={TailwindSeparator}
    docs={tailwindDocs.exports.Separator}
    links={tailwindDocs.links}
    props={['orientation']}
    type="tailwind"
    files={["starters/tailwind/src/Separator.tsx"]} />
</ExampleSwitcher>

## API

<PropTable component={docs.exports.Separator} links={docs.links}/>